<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米首页</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

    <!--固定屏幕右边菜单-->
    <section class="left_fixed">
        <ul>
            <li>
                <a href="javascript:;">
                    <p class="iconfont">&#xe631;</p>
                    <p class="m_top_5">手机APP</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <p class="iconfont">&#xe663;</p>
                    <p class="m_top_5">个人中心</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <p class="iconfont">&#xe667;</p>
                    <p class="m_top_5">联系客服</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <p class="iconfont">&#xe65f;</p>
                    <p class="m_top_5">购物车</p>
                </a>
            </li>
        </ul>
    </section>
    <!--header-->
    <header class="mi_header">
        <div class="container clearFix">
            <div class="header_box f_left">
                <ul>
                    <li>
                        <a href="javascript:;">小米商城<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">MIUI<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">IoT<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">云服务<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">金融<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">有品<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">小爱开放平台<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">政企服务<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">下载app<span></span></a>
                    </li>
                    <li>
                        <a href="javascript:;">Select Region</a>
                    </li>
                </ul>
            </div>
            <div class="header_box f_right">
                <ul>
                    <li><a href="javascript:;">登陆</a></li>
                    <li><a href="javascript:;">注册</a></li>
                    <li><a href="javascript:;">消息通知</a></li>
                    <li class="header_cart">
                        <a href="javascript:;">
                            <span class="iconfont icon_cart">&#xe65f;</span>
                            购物车(0)
                        </a>
                    </li>
                </ul>
                </div>
        </div>
    </header>
    <!--mi 头部导航-->
    <nav class="mi_nav">
        <div class="container clearFix">
            <div class="mi_nav_left f_left">
                <ul>
                    <li class="mi_logo"><a href=""></a></li>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">新品</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="mi_nav_right f_right">
                <form action="/xiaomi/search" method="get">
                    <input id="searchInput" name="info" class="info" type="text" autocomplete="off"/>
                    <a id="search_btn" class="iconfont icon_search f_right">&#xeef7;</a>
                    <div class="search_info">
                        <a href=""><span>小米8</span></a>
                        <a href=""><span>小米MIX 2S</span></a>
                        <a href=""><span>故宫K歌耳机</span></a>
                    </div>
                    <div id="pull_down_box" class="pull_down_box">
                        <ul id="pull_down_ul">

                        </ul>
                    </div>
                </form>

            </div>
        </div>

    </nav>
    <!--轮播图-->
    <section class="mi_carousel">
        <div class="container">
            <!--轮播图中导航-->
            <nav class="carousel_nav">
                <ul>
                    <li><span class="f_left">手机 电话卡</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">电视 盒子</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">笔记本 平板</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">家电 插线板</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">出行 穿戴</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">智能 路由器</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">电源 配件</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">健康 儿童</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">耳机 音箱</span><span class="iconfont f_right">&#xe63c;</span></li>
                    <li><span class="f_left">生活 箱包</span><span class="iconfont f_right">&#xe63c;</span></li>
                </ul>
            </nav>
            <ul id="carouselUl">
                <li><a href=""><img src="./image/slide5.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide1.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide2.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide3.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide4.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide5.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/slide1.jpg" alt=""></a></li>
            </ul>
            <div class="carousel_dot">
                <ul>
                    <li class="dots selected"></li>
                    <li class="dots"></li>
                    <li class="dots"></li>
                    <li class="dots"></li>
                    <li class="dots"></li>
                </ul>
            </div>
            <div class="carousel_arrows clearFix">
                <span class="iconfont arrows arrows_left" title="0">&#xe682;</span>
                <span class="iconfont arrows arrows_right" title="1">&#xe63c;</span>
            </div>
        </div>
    </section>
    <!--轮播图下方广告-->
    <section class="mi_header_ad">
        <div class="container">
            <div class="f_left ad_left">
                <ul>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>选购手机</a></li>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>企业团购</a></li>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>F码通道</a></li>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>米粉卡</a></li>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>已旧换新</a></li>
                    <li><a href="javascript:;"><div class="iconfont icon_ad">&#xe61d;</div>花费充值</a></li>
                </ul>
            </div>
            <div class="f_right ad_right">
                <ul>
                    <li><a href="javascript:;"><img src="./image/ad1.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="./image/ad2.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="./image/ad3.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!--mi 闪购-->
    <section class="mi_flashbuy">
        <div class="container">
            <div class="flashbuy_header">
                <div class="left">小米闪购</div>
                <div class="right">
                    <div title="left" class="direction icon_flash_left iconfont">&#xe682;</div>
                    <div title="right" class="flash_selected direction icon_flash_right iconfont">&#xe63c;</div>
                </div>
            </div>
            <div class="flashbuy_box">
                <div class="left">
                    <p>18:00 场</p>
                    <p><img class="img_flashpurchase" src="./image/flashpurchase.png" alt=""></p>
                    <p>距离开始还有</p>
                    <p>
                        <span>11</span> :
                        <span>11</span> :
                        <span>11</span>
                    </p>
                </div>
                <div class="right">
                    <ul id="flashbuy_ul">
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy1.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy1.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy1.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy1.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy2.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy2.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy2.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy2.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy3.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy3.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy3.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript;'">
                                <div class="one_flashbuy">1元秒杀</div>
                                <div class="img_flashbuy_box"><img src="./image/flashbuy3.jpg" alt=""></div>
                                <div class="content">
                                    <p>小米手环3 热力橙</p>
                                    <p>顺化柔然 触感舒适</p>
                                    <p><span>1元</span> <span>1222元</span></p>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!--mi 闪购下面广告-->
    <section class="mi_ad">
        <div class="container">
            <a href=""><img src="./image/mi_ad.png" alt=""></a>
        </div>
    </section>
    <!--手机频道-->
    <section class="mi_phone">
        <div class="container">
            <div class="header">
                <div class="left">手机</div>
                <a class="right">查看全部 <span class="iconfont">&#xe63c;</span></a>
            </div>
            <div class="content">
                <div class="left">
                    <a href="javascript:;"><img src="./image/mi_phone_left.jpg" alt=""></a>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href=""><img src="./image/mi_phone_right.jpg" alt="">
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section style="background: #f5f5f5" class="mi_ad">
        <div class="container">
            <a href=""><img src="./image/mi_ad.png" alt=""></a>
        </div>
    </section>
    <!--家电频道-->
    <section class="home">
        <div class="container">
            <div class="header">
                <div class="title">家电</div>
                <div class="tab_title">
                    <ul>
                        <li class="tab_li tab_select">热门</li>
                        <li class="tab_li">电影影视</li>
                        <li class="tab_li">电脑</li>
                        <li class="tab_li">家具</li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="left">
                    <a href=""><img src="./image/jiadian_left1.jpg" alt=""></a>
                    <a href=""><img src="./image/jiadian_left2.jpg" alt=""></a>
                </div>
                <div id="home_tab_box" class="right">
                    <ul>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right1.jpg" alt=""></a></li>
                        <li>
                            <div class="top">
                                <p>小米净水器</p>
                                <p>1222</p>
                                <img src="./image/jiadian_right_small1.jpg" alt="">
                            </div>
                            <div class="bottom">
                                <p>浏览更多</p>
                                <p>家具</p>
                                <p class="iconfont">&#xe6ed;</p>
                            </div>
                        </li>
                    </ul>

                    <ul class="display_none">
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right2.jpg" alt=""></a></li>
                        <li>
                            <div class="top">
                                <p>小米净水器</p>
                                <p>1222</p>
                                <img src="./image/jiadian_right_small2.jpg" alt="">
                            </div>
                            <div class="bottom">
                                <p>浏览更多</p>
                                <p>家具</p>
                                <p class="iconfont">&#xe6ed;</p>
                            </div>
                        </li>
                    </ul>

                    <ul class="display_none">
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right3.jpg" alt=""></a></li>
                        <li>
                            <div class="top">
                                <p>小米净水器</p>
                                <p>1222</p>
                                <img src="./image/jiadian_right_small3.jpg" alt="">
                            </div>
                            <div class="bottom">
                                <p>浏览更多</p>
                                <p>家具</p>
                                <p class="iconfont">&#xe6ed;</p>
                            </div>
                        </li>
                    </ul>

                    <ul class="display_none">
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li><a href=""><img src="./image/jiadian_right4.jpg" alt=""></a></li>
                        <li>
                            <div class="top">
                                <p>小米净水器</p>
                                <p>1222</p>
                                <img src="./image/jiadian_right_small3.jpg" alt="">
                            </div>
                            <div class="bottom">
                                <p>浏览更多</p>
                                <p>家具</p>
                                <p class="iconfont">&#xe6ed;</p>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>

        </div>
    </section>

</body>

<script src="js/index.js"></script>
</html>